<template>
  <div class="page">
    <a-breadcrumb>
      <a-breadcrumb-item>博客管理</a-breadcrumb-item>
      <a-breadcrumb-item>评论管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 表格操作区 -->
    <div class="table-op">
      <div>
        <a-button type="primary" @click="router.push({ name: 'EditBlogs' })">创建文章</a-button>
      </div>
      <div>
        <a-input
          :style="{ width: '320px' }"
          @press-enter="queryblog"
          v-model="queryParams.keywords"
          placeholder="请输入关键字"
          allow-clear
        />
      </div>
    </div>
    <!-- 表格内容区，参考ui库 -->
    <div>
      <!-- 绑定博客列表和响应数据 -->
      <a-table :data="blog.items" :pagination="false">
        <template #columns>
          <a-table-column title="编号" data-index="id"></a-table-column>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="创建时间">
            <!--
                            cell 是<table-column> Slots
                            { record }可参考：table中的"可编辑表格"
                            使用dayjs来处理时间；
                        -->
            <template #cell="{ record }">
              {{ dayjs.unix(record.created_at).format('YYYY-MM-DD HH:mm') }}
            </template>
          </a-table-column>
          <a-table-column align="center" title="操作">
            <template #cell="{ record }">
              <!-- a-space 用来调整按钮之间的间距 -->
              <a-space>
                <!-- query: {id: record.id}}表示携带，查询参数 -->
                <a-button
                  type="primary"
                  @click="router.push({ name: 'EditBlogs', query: { id: record.id } })"
                >
                  编辑</a-button
                >
                <a-button type="primary">发布</a-button>
                <a-popconfirm
                  content="Are you sure you want to delete?"
                  @ok="deleteBlog(record.id)"
                  type="error"
                >
                  <!-- loading表示按钮是否为加载中状态 -->
                  <a-button status="danger" type="primary" :loading="deleteLoading === record.id"
                    >删除</a-button
                  >
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <!-- 分页 -->
    <div style="margin: 10px">
      <a-pagination
        :total="blog.total"
        :page-size-options="[2, 10, 20, 30, 50]"
        show-total
        show-jumper
        show-page-size
        @page-size-change="onPageSizeChange"
        @change="onPageNumberChange"
      />
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { LIST_BLOG, DELETE_BLOG } from '../../../api/blog'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'

const router = useRouter()
// const blog= ref() 写成这样也是可以的；下面的写法是为了了解后端的返回值，仅此而已
const blog = ref({ items: [], total: 0 })
const queryloading = ref(false)
const queryParams = ref({
  page_size: 10,
  page_number: 1,
  keywords: ''
})
// 查询博客列表,记录loadding状态
const queryblog = async () => {
  queryloading.value = true
  // 为什么没用catch(error)？ 因为error由拦截器统一处理了
  try {
    // queryParams.value参数是在分页逻辑时需要，才加上取得
    const resp = await LIST_BLOG(queryParams.value)
    // console.log(resp)
    blog.value = resp
  } finally {
    queryloading.value = false
  }
}
// 分页的逻辑处理
const onPageSizeChange = (pagesize) => {
  queryParams.value.page_size = pagesize
  queryParams.value.page_number = 1
  queryblog()
}
const onPageNumberChange = (pagenumber) => {
  queryParams.value.page_number = pagenumber
  queryblog()
}

// 当前处于删除中的文章的具体Id
// 为什么不用ref(false)呢？ 因为如果用此种方式的话，左右删除都处于loading状态
const deleteLoading = ref(0)
const deleteBlog = async (id) => {
    // console.log(id)
  try {
    deleteLoading.value = id
    await DELETE_BLOG(id)
    // 删除成功后，需要刷新列表的数据
    queryblog()
  } catch (error) {
    Message.error(`获取博客失败:${error.message}`)
  } finally {
    deleteLoading.value = 0
  }
}

// 页面渲染之前，需要把数据提前准备好,固定用法
onBeforeMount(async () => {
  await queryblog()
})
</script>

<style lang="css" scoped>
.table-op {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
</style>
